<template>
	<view>

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="xbgf">
					<u-tabs :list="list.list" :current="current" @click="click"></u-tabs>


				</view>
			</template>

			<view class="xp20-25">

				<view class="xmb24" v-for="(item,index) in dataList" :key="item.id">

					<!-- 待发布 -->
					<template v-if="item.status == 0">
						<unpublished :info="item" @updata="updatafn" @onshow="(e)=>{onshow(e,index)}"
							@edit="e=>{edit(e,1)}" @gx="gx">
						</unpublished>
					</template>


					<!-- 已发布 -->

					<template v-if="item.status == 1">
						<wait :info="item" v-if="item.status == 1 && item.match.status == 2" @updata="updatafn"
							@edit="e=>{edit(e,2)}" @del="()=>{del(index)}" @delc="()=>{dels(index)}"></wait>
						<graborder @remove="(e)=>{remove(e,index)}" :info="item"
							v-if="item.status == 1 && item.match.status == 1" @edit="e=>{edit(e,2)}" @updata="updatafn"
							@del="()=>{del(index)}" />
						<!-- <graborder /> -->
					</template>
					<template v-if="item.status == 7">
						<cancel />
					</template>

					<!-- 待支付 -->

					<template v-if="item.status == 2">
						<unpaid :info="item" @updata="updatafn"></unpaid>
					</template>

					<!-- 待入住 -->
					<template v-if="item.status == 3">
						<reside :info="item" @updata="updatafn"></reside>
					</template>
					<!-- 待评价 -->
					<template v-if="item.status == 5 || item.status == 4">
						<estimate :info="item" @updata="updatafn"></estimate>
					</template>
					<!-- 已完成 -->
					<template v-if="item.status == 6">
						<complete :info="item" @updata="updatafn"></complete>
					</template>



				</view>

				<view class="" style="height: 200rpx;">

				</view>

			</view>
			<template #bottom v-if="current == 0">
				<view class="xbottom">
					<view class="btn" @click="sub()">
						合并订单发布
					</view>
				</view>
			</template>


			<!-- <template #bottom >
				<view class="xbottom">
					
					
					<view class="xflex-x-between">
						<view class="btn2">
							取消订单
						</view>
						<view class="btn3" @click="sub()">
							合并订单发布
						</view>
					</view>
				</view>
			</template> -->
		</z-paging>

		<u-popup mode="center" :show="ritx.show" :round="20">
			<view class="popup pr">
				<view class="popup-title">
					温馨提示
				</view>
				<image class="popup-gb pa" @click="ritx.show = false" src="/static/image/mine/gb1.png" mode=""></image>
				<view class="popup-content">
					<u-parse :content="ritx.content"></u-parse>
				</view>

				<view class="xflex-x-between popup-bom">
					<view class="popup-btn1" @click="cances()">
						返回修改
					</view>
					<view class="popup-btn2" @click="ritx.show = false">
						继续等待
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup mode="center" :show="tpsshow" :round="20">
			<view class="popup pr">
				<view class="popup-title">
					温馨提示
				</view>
				<image class="popup-gb pa" @click="tpsshow = false" src="/static/image/mine/gb1.png" mode=""></image>
				<view class="popup-content">
					订单信息已保留至待发布页面，请查看或修改后再发布吧
				</view>
		
				
			</view>
		</u-popup>
		


		<u-popup :show="false" :round="20">
			<view class="popcancel pr">
				<view class="popup-title">
					取消订单
				</view>
				<image class="popup-gb pa" @click="ritx.show = false" src="/static/image/mine/gb1.png" mode=""></image>
				<view class="popcancel-box">
					<view class="popcancel-content">
						<u-parse :content="cancelinfo.content"></u-parse>
					</view>

					<view class="popcancel-tit">
						请选择取消订单的原因（必选）：
					</view>

					<view class="xflex-x popcancel-item" v-for="(items,indx) in cancelinfo.reason" :key="indx">
						<!-- <image class="popcancel-img" v-if="cancelinfo.index == indx" src="/static/image/mine/xz.png" mode=""></image> -->
						<!-- <image class="popcancel-img" v-else src="/static/image/mine/wxz.png" mode=""></image> -->
						<view class="popcancel-text">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		hotelList,
		hotelpublish,
		ordercheck,
		indexcontent,
		orderpop,
		hotelcancel,
		reason,
		orderrefresh,
		userInfo,
		hotelrewait
	} from '../../../network/home.js'

	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';


	import {
		useCounterStore
	} from '@/Store/index'
	const counter = useCounterStore()

	import unpublished from "./components/unpublished.vue"
	import wait from "./components/wait.vue"
	import graborder from "./components/graborder.vue"
	import cancel from "./components/cancel.vue"
	import unpaid from '../order/components/unpaid.vue'
	import reside from './components/reside.vue'
	import estimate from './components/estimate.vue'
	import complete from './components/complete.vue'

	const paging = ref(null)
	let current = ref(0)
	onLoad((option) => {
		current.value = option.type
		// current.value = 4
	})

	let ritx = reactive({
		show: false,
		content: '',
		id: '',
	})
	indexcontent({
		name: 'order_publish_after'
	}).then(res => {
		ritx.content = res.data
	})

	let cancelinfo = reactive({
		content: '',
		reason: [],
		index: '0'
	})
	reason().then(res => {
		cancelinfo.reason = res.data.data
	})
	indexcontent({
		name: 'cancel_order_tip'
	}).then(res => {
		cancelinfo.content = res.data
	})

	// 取消订单
	const cances = () => {
		if (!ritx.id) return
		// hotelcancel({
		hotelrewait({
			id: ritx.id
		}).then(res => {
			current.value = 0
			ritx.show = false
			updatafn()
			
			
			
		})
	}
	// 取消弹窗
	const getorderpop = () => {
		orderpop({
			order_id: ritx.id
		})
	}
	// 设置定时器
	let timerapi = ref(null)

	const remove = (index1, index2) => {
		// 移除
		dataList.value[index2].match.hotels.splice(index1, 1)


		// 添加
	}

	const getordercheck = () => {
		ordercheck().then(res => {
			if (res.data.pop == 1 && !ritx.show) {
				ritx.id = res.data.order_id
				ritx.show = true
				getorderpop()
			}

		})
	}

	onMounted(() => {
		timerapi.value = setInterval(() => {
			// 在这里执行你的代码  
			getordercheck()
		}, 1000);
	})
	
	let timr = ref(null)
	timr.value = setInterval(()=>{
		getinfoss()
	},1000)

	onUnmounted(() => {
		if (timerapi.value) {
			clearInterval(timerapi.value);
			timerapi.value = null;
		}
		
		clearInterval(timr.value)
		timr.value = null
	});


	// 移除已发布倒计时为0

	const del = (index) => {
		dataList.value.splice(index, 1)
		
		
	}
	let tpsshow = ref(false)
	const dels = (index) => {
		current.value = 0
		tpsshow.value = true
		// dataList.value.splice(index, 1)
		setTimeout(()=>{
			paging.value.reload()
		},1000)
		
	}

	// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
	const dataList = ref([])

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
		// 此处请求仅为演示，请替换为自己项目中的请求
		hotelList({
			page_no: pageNo,
			page_size: pageSize,
			status: list.list[current.value].index
		}).then(res => {
			res.data.lists.map(item => {
				item.show = false
				return item
			})


			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			paging.value.complete(res.data.lists);
			if (current.value == 1) {
				getorderrefresh()
			}
			console.log(dataList);
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false);
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			paging.value.complete(false);
		})
	}


	// 延时执行判断
	const getorderrefresh = () => {

		let arr = []
		dataList.value.forEach(item => {
			console.log(item.status, item.match.status);
			if (item.status == 1 && item.match.status == 2) {
				console.log(item, "=========");
				arr.push(item.id)
			}
		})

		console.log(arr);

		if (arr.length > 0) {
			orderrefresh({
				ids: arr
			}).then(res => {
				if (res.data.is_refresh == 1) {
					setTimeout(() => {
						paging.value.reload()
					}, 3000)
				} else {
					setTimeout(() => {
						getorderrefresh()
					}, 3000)
				}
			})
		} else {
			setTimeout(() => {
				getorderrefresh()
			}, 3000)
		}





	}




	// 编辑
	const edit = (e, type = 1) => {

		counter.enterInfo.keyword = e.keyword
		counter.enterInfo.address = e.address
		counter.enterInfo.start = e.start_add
		counter.enterInfo.end = e.end

		counter.enterInfo.star_id = e.star_id
		counter.enterInfo.price = e.price,
			counter.enterInfo.day = Number(e.night) + 1
		counter.enterInfo.house = []
		e.items.forEach(item => {
			counter.enterInfo.house.push({
				type_id: item.type_id,
				adult: item.adult,
				children: item.children
			})
		})
		counter.enterInfo.order_id = e.id
		counter.enterInfo.score_id = e.score_id
		counter.enterInfo.free_id = e.free_id.split ? e.free_id.split(',').map(Number) : []
		counter.enterInfo.support_id = e.support_id ? e.support_id.split(',').map(Number) : []
		counter.enterInfo.charge_id = e.charge_id ? e.charge_id.split(',').map(Number) : []

		console.log(counter.enterInfo);

		counter.enterInfo.free_id = counter.enterInfo.free_id.filter((item) => {
			return String(item) != '0';
		})

		counter.enterInfo.support_id = counter.enterInfo.support_id.filter((item) => {
			return String(item) != '0';
		})


		counter.enterInfo.charge_id = counter.enterInfo.charge_id.filter((item) => {
			return String(item) != '0';
		})


		// console.log(e.free_id.split(','));
		// return
		if (type == 1) {
			uni.navigateTo({
				url: '/pages/mine/order/detail/publish?id=' + e.id
			})

		} else {
			uni.navigateTo({
				url: '/pages/mine/order/detail/published?id=' + e.id
			})

		}
	}

	onShow(() => {
		paging.value.reload()
	})
	// 点击选择
	const onshow = (e, index) => {

		dataList.value[index].show = e
		console.log(dataList.value[0]);
	}

	const gx = () => {
		uni.$u.throttle(() => {
			current.value = 1
			paging.value.reload()
		}, 500)
	}

	const updatafn = () => {
		paging.value.reload()
		uni.$u.throttle(() => {
			paging.value.reload()
		}, 500)

	}

	// 合并发布 
	const sub = () => {
		let arr = []
		dataList.value.forEach(item => {
			if (item.show) {
				arr.push(item.id)
			}
			hotelpublish({
				ids: arr
			}).then(res => {
				uni.showToast({
					icon: "none",
					title: '发布成功'
				})
				updatafn()
			})
		})
	}

	const click = (e) => {
		current.value = e.index
		paging.value.reload()
	}

	let list = reactive({
		list: [{
			name: '待发布',
			index: 0,
			badge: {
				value: 0,
			}
		}, {
			name: '已发布',
			index: 1,
			badge: {
				value: 0,
			}
		}, {
			name: '待支付',
			index: 2,
			badge: {
				value: 0,
			}
		}, {
			name: '待入住',
			index: 3,
			badge: {
				value: 0,
			}
		}, {
			name: '待评价',
			index: 5,
			badge: {
				value: 0,
			}

		}, {
			name: '已完成',
			index: 6,
			badge: {
				value: 0,
			}
		}]
	})
	
	const getinfoss = () =>{
		userInfo().then(res=>{
			list.list[0].badge.value = res.data.order.wait
			list.list[1].badge.value = res.data.order.publish
			list.list[2].badge.value = res.data.order.pay
			list.list[3].badge.value = res.data.order.in
			list.list[4].badge.value = res.data.order.comment
			// list.list[5].badge.value = res.data.order.complete
			
		})
	}
	
	
	
	
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.btn {
		width: 620rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin: auto;
	}

	.popup {
		width: 600rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding-bottom: 20rpx;

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}

		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 20rpx;
			right: 20rpx;
		}

		&-content {
			margin: 33rpx 54rpx;
			min-height: 370rpx;
		}

		&-btn1 {
			width: 210rpx;
			height: 88rpx;
			border-radius: 44rpx;
			border: 2px solid #999999;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			line-height: 88rpx;
		}

		&-btn2 {
			width: 300rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}

		// &-content {
		// 
		// }

		&-bom {
			margin: 0 30rpx;
		}

	}

	.icon {
		width: 25rpx;
		height: 25rpx;
	}

	.time {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #198FFF;
	}

	.btn2 {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 88rpx;
		text-align: center;
	}

	.btn3 {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.popcancel {
		width: 750rpx;
		height: 1300rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		&-box {
			padding: 49rpx 25rpx 25rpx;
		}

		&-content {
			width: 700rpx;
			height: 276rpx;
			background: #F8F8F8;

		}

		&-tit {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-top: 86rpx;
		}


		&-item {
			margin-top: 68rpx;
		}

		&-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
		}

		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
		}
	}
</style>